<template>
  <div class="update-table">
    <el-card class="box-card" style="min-height: 500px; text-align: left">
      <el-page-header @back="goBack" content="配置页面">
      </el-page-header>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="表配置" name="first" prop="tableConfigForm">
          <table-config :tableConfig="tableConfig"/>
        </el-tab-pane>
        <el-tab-pane label="字段配置" name="second" prop="tableConfigColumnForm">
          <!--表格-->
          <el-table
              :data="tableColumnConfigList"
              border
              row-key="id"
              ref="tableColumnConfig"
              style="width: 100%">
            <el-table-column
                align="center"
                type="index"
                class-name="allowDrag"
                label="序号">
            </el-table-column>
            <el-table-column
                align="center"
                prop="columnName"
                label="字段名称">
            </el-table-column>
            <el-table-column
                align="center"
                prop="columnComment"
                label="字段注释"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                align="center"
                prop="columnType"
                label="字段类型">
            </el-table-column>
            <el-table-column
                align="center"
                prop="javaType"
                label="Java类型">
            </el-table-column>
            <el-table-column
                align="center"
                prop="javaField"
                label="Java属性">
            </el-table-column>
            <el-table-column
                align="center"
                width="50"
                label="表单">
              <template slot-scope="scope">
                <el-checkbox true-label="true" false-label="false" v-model="scope.row.pageForm"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="50"
                label="必填">
              <template slot-scope="scope">
                <el-checkbox true-label="true" false-label="false" v-model="scope.row.pageFormRequired"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="50"
                label="列表">
              <template slot-scope="scope">
                <el-checkbox true-label="true" false-label="false" v-model="scope.row.pageTableShow"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="70"
                label="查询条件">
              <template slot-scope="scope">
                <el-checkbox true-label="true" false-label="false" v-model="scope.row.pageQuery"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="查询方式">
              <template slot-scope="scope">
                <el-select v-model="scope.row.pageQueryType" placeholder="查询方式">
                  <el-option v-for="(item, index) in queryTypeList" :key="index" :label="item.value"
                             :value="item.key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="表单组件">
              <template slot-scope="scope">
                <el-select v-model="scope.row.pageHtmlType" placeholder="表单组件">
                  <el-option v-for="(item, index) in htmlTypeList" :key="index" :label="item.value"
                             :value="item.key"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div style="text-align: center; margin-top: 20px">
        <el-button type="primary" @click="saveTableConfig">确 定</el-button>
        <el-button @click="cancelTableConfig">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getTable, getTableColumn, updateTable} from "@/api/codegen";
import {Message} from "element-ui";
import Sortable from "sortablejs";
import TableConfig from "@/views/codegen/TableConfig";
import {getHtmlType, getQueryType} from "@/api";

export default {
  name: 'updateTable',
  components: {TableConfig},
  data() {
    return {
      activeName: 'first',
      id: null,
      tableConfig: {},
      tableColumnConfigList: [],
      queryTypeList: [],
      htmlTypeList: []
    }
  },
  created() {
    this.getQueryType();
    this.getHtmlType()
    this.getTableConfig();
  },
  mounted() {
    window.addEventListener('beforeunload', this.getTableConfig);
    this.sortTableColumn();
  },
  methods: {
    // 返回
    goBack() {
      this.$router.push({path: '/'});
    },
    // 查询查询方式
    getQueryType() {
      getQueryType().then(res => {
        this.queryTypeList = res.data;
      })
    },
    // 查询页面组件
    getHtmlType() {
      getHtmlType().then(res => {
        this.htmlTypeList = res.data;
      })
    },
    // 查询数据
    getTableConfig() {
      const id = this.$route.query.id;
      getTable(id).then(response => {
        this.id = response.data.id;
        this.tableConfig = response.data;
      });
      getTableColumn(id).then(response => {
        this.tableColumnConfigList = response.data;
      });
    },
    // 排序
    sortTableColumn() {
      const el = this.$refs.tableColumnConfig.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
      const self = this;
      Sortable.create(el, {
        handle: '.allowDrag',
        onEnd({newIndex, oldIndex}) {
          const targetRow = self.tableColumnConfigList.splice(oldIndex, 1)[0];
          self.tableColumnConfigList.splice(newIndex, 0, targetRow);
        }
      });
    },
    // 保存
    saveTableConfig() {
      const id = this.id;
      updateTable(id, {tableConfig: this.tableConfig, tableColumnConfigList: this.tableColumnConfigList}).then(() => {
        Message.success("修改成功");
        this.$router.push({path: '/'});
      });
    },
    // 取消
    cancelTableConfig() {
      this.$router.push({path: '/'});
    }
  }
}
</script>

<style scoped>
.el-page-header {
  margin-bottom: 20px;
}

/deep/ .el-page-header__content {
  font-size: 14px !important;
}
</style>
